<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
const map = ref()
const scale = ref(14)
const minScale = ref(4.5)
const mapshow = ref(false)
const latitude = ref(39.909)
const longitude = ref(116.39742)

const covers = [
  {
    latitude: 33.9599,
    longitude: 118.1,
    iconPath: '/static/images/ic_map_dot.png',
  },
  {
    latitude: 33.9599,
    longitude: 118.3,
    iconPath: '/static/images/ic_map_dot.png',
  },
]

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif
onLoad(() => {})

onShow(() => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      const myloc = { latitude: res.latitude, longitude: res.longitude }
      console.log('当前位置的经度：' + res.longitude)
      console.log('当前位置的纬度：' + res.latitude)
      latitude.value = res.latitude
      longitude.value = res.longitude
      // map.value && map.value.moveToLocation(myloc)
    },
    fail: (res) => {
      console.log('定位失败')
    },
  })
})

const jumpAdd = () => {
  uni.navigateTo({
    url: '/pages/add/upOrEditPage',
  })
}

const jumpHistory = () => {
  uni.navigateTo({
    url: '/pages/history/index',
  })
}
</script>

<template>
  <view class="flex flex-col h-100vh bg-#F2F3F7">
    <geek-header noLeft title="繁星工程" placeholder></geek-header>
    <view class="flex-1 relative flex-col flex">
      <image
        class="w-full h-40% pos-fixed top-0 left-0 z-1"
        src="@/static/images/bg_index_top.png"
        mode="scaleToFill"
      />

      <view class="flex mt-20rpx z-2 items-center ml-10rpx pos-relative">
        <image
          class="h-60rpx w-60rpx bg-avatar ml-15rpx rd-50%"
          src="@/static/images/default-avatar.png"
          mode="scaleToFill"
        />
        <view class="ml-10rpx text-32rpx text-#323433 font-bold">流沙</view>

        <view
          class="pos-absolute right-30rpx text-#377BF4 text-26rpx bg-txt px-20rpx py-10rpx"
          @click="jumpHistory"
        >
          历史记录
        </view>
      </view>

      <view class="bg-map bg-white mx-30rpx my-24rpx z-2 pos-relative flex-1 p-10rpx">
        <map
          id="map"
          ref="map"
          style="width: 100%; height: 100%"
          :latitude="latitude"
          :longitude="longitude"
          :show-location="true"
          :markers="covers"
        ></map>
      </view>
    </view>

    <view class="h-100rpx bg-#FFFFFF">
      <view class="h-88rpx mx-30rpx bg-#377BF4 relative rd-16rpx" @click="jumpAdd">
        <view
          class="text-#FFFFFF text-32rpx flex items-center justify-center font-bold h-100% w-full"
        >
          创建记录
        </view>
        <image
          class="w-100% h-100% pos-absolute top-0 left-0 z-10"
          src="@/static/images/bg_bt.png"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.bg-avatar {
  box-shadow: 0px 0px 6px 0px rgba(170, 183, 191, 0.5);
  border: 1px solid #ffffff;
}

.bg-txt {
  box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(99, 185, 253, 0.34);
  border-radius: 36rpx;
  border: 2rpx solid #377bf4;
}

.bg-map {
  box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(203, 215, 222, 0.62);
  border-radius: 16rpx;
}
</style>
